<template>
  <!-- v-on:mouseout="move()" -->
  <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">  
    <div sss></div>
    <div class="slideshow">  
      <transition-group tag="ul" name="image">  
        <li v-for="(item, index) in imgArray" v-show="index===mark" :key="index">  
          <div class="title">{{item.title}}</div> 
          <div class="name">{{item.name}}</div>
          <div class="p">{{item.p1}}</div>
          <div class="p">{{item.p2}}</div>
          <div class="p">{{item.p3}}</div>

          <div class="realization" @click="register" style="cursor: pointer;">
            <!-- <i class="iconfont icon-right1"></i> -->
            <img src="" alt="">
            <span>立即注册</span>
        </div>
        </li>  
      </transition-group>  
    </div>  
    <div class="bar">  
      <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }"  
      @click="change(index)" :key="index"></span>  
    </div>  
  </div>  
</template>
<script>
const MARK_LEN = 3;
export default {
  data() {
    return {
      timer: null, //定时器
      mark: 0, //比对图片索引的变量
      imgArray: [
        {
          title: "互动式效果广告",
          name: "全新广告移动模式",
          p1: "独创的互动式广告 ",
          p2: "不断创新的互动场景和玩法",
          p3: "实现用户，媒体端和广告主的三端共赢"
        },
        {
          title: "互动式效果广告",
          name: "丰富营销活动场景",
          p1: "多种互动场景和玩法",
          p2: "一对一运营支持，精细化运营 ",
          p3: "为广告主提供更好的效果反馈和优质用户"
        },
        {
          title: "互动式效果广告",
          name: "高效流量对接平台",
          p1: "灵活的广告入口 ",
          p2: "轻量对接，更高变现效率",
          p3: "好的广告体验更能提升用户体验和活跃"
        }
      ]
    };
  },
  methods: {
    autoPlay() {
      this.mark++;
      if (this.mark === MARK_LEN) {
        this.mark = 0;
      }
    },
    play() {
      this.timer = setInterval(this.autoPlay, 4500);
    },
    change(i) {
      this.mark = i;
    },
    stop() {
      clearInterval(this.timer);
    },
    move() {
      this.timer = setInterval(this.autoPlay, 4500);
    },
    register() {
      window.open("http://www.lertui.com/media/page/login/regi.html");
    }
  },
  created() {
    this.play();
  }
};
</script>
<style lang="scss" scoped>
.slide {
  width: 570px;
  height: 390px;
  margin: 0 auto;
  margin-top: 50px;
  overflow: hidden;
  position: relative;
  padding: 10px;
  /* border: 1px solid darkblue; */
}
.slideshow {
  width: 550px;
  height: 320px;
  background: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}
li {
  width: 100%;
  position: absolute;
  p {
    text-align: center;
  }
  .title {
    font-size: 25px;
    color: #fe5411;
  }
  .name {
    font-size: 20px;
    margin: 20px;
  }
  .p {
    margin: 10px auto;
    color: #999999;
  }
  .realization {
    width: 150px;
    height: 45px;
    line-height: 45px;
    background: #fe5411;
    margin: 25px auto;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
  }
}
img {
  width: 524px;
  height: 320px;
}
.bar {
  position: absolute;
  width: 100%;
  bottom: 25px;
  margin: 0 auto;
  z-index: 10;
  text-align: center;
  z-index: 999;
}
.bar span {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 4px;
  display: inline-block;
  margin-right: 10px;
  background: gainsboro;
  cursor: pointer;
}
.active {
  width: 16px !important;
  height: 8px !important;
  background: #fe5411 !important;
}
.image-enter-active {
  transform: translateX(0);
  transition: all 1.5s ease;
}
.image-leave-active {
  transform: translateX(-100%);
  transition: all 1.5s ease;
}
.image-enter {
  transform: translateX(100%);
}
.image-leave {
  transform: translateX(0);
}
</style>
